<template>
  <div class="check-analysis-container">
    <el-card shadow="never" class="header-card">
      <div class="page-header">
        <div class="header-content">
          <el-icon class="header-icon" :size="28"><DataLine /></el-icon>
          <div class="header-text">
            <h2>盘点分析报告</h2>
            <p>深度分析盘点数据，发现管理问题</p>
          </div>
        </div>
        <div class="header-actions">
          <el-select v-model="selectedPeriod" style="width: 200px;">
            <el-option label="本月" value="month" />
            <el-option label="本季度" value="quarter" />
            <el-option label="本年度" value="year" />
            <el-option label="自定义" value="custom" />
          </el-select>
          <el-button type="primary" @click="handleGenerate">
            <el-icon><Document /></el-icon>
            生成报告
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 综合评分 -->
    <el-card shadow="never" class="score-card">
      <div class="score-container">
        <div class="score-main">
          <div class="score-circle">
            <el-progress 
              type="circle" 
              :percentage="overallScore" 
              :width="180"
              :stroke-width="12"
            >
              <template #default>
                <div class="score-content">
                  <div class="score-value">{{ overallScore }}</div>
                  <div class="score-label">综合得分</div>
                </div>
              </template>
            </el-progress>
          </div>
          <div class="score-desc">
            <h3>盘点质量评估</h3>
            <p>本期盘点工作{{ getScoreLevel(overallScore) }}，{{ getScoreComment(overallScore) }}</p>
          </div>
        </div>
        <div class="score-breakdown">
          <div class="breakdown-item">
            <span class="breakdown-label">完成率</span>
            <el-progress :percentage="89" :stroke-width="8" />
          </div>
          <div class="breakdown-item">
            <span class="breakdown-label">准确率</span>
            <el-progress :percentage="95" :stroke-width="8" status="success" />
          </div>
          <div class="breakdown-item">
            <span class="breakdown-label">及时率</span>
            <el-progress :percentage="78" :stroke-width="8" status="warning" />
          </div>
          <div class="breakdown-item">
            <span class="breakdown-label">规范性</span>
            <el-progress :percentage="92" :stroke-width="8" />
          </div>
        </div>
      </div>
    </el-card>

    <!-- 问题分析 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="never">
          <div class="section-title">
            <el-icon><Warning /></el-icon>
            <span>主要问题分析</span>
          </div>
          <div class="problem-list">
            <div v-for="(problem, index) in problems" :key="index" class="problem-item">
              <div class="problem-header">
                <el-tag :type="problem.level" size="large">{{ problem.levelName }}</el-tag>
                <span class="problem-title">{{ problem.title }}</span>
              </div>
              <div class="problem-desc">{{ problem.desc }}</div>
              <div class="problem-impact">影响：{{ problem.impact }}</div>
              <div class="problem-solution">
                <span class="solution-label">建议：</span>
                {{ problem.solution }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card shadow="never">
          <div class="section-title">
            <el-icon><Opportunity /></el-icon>
            <span>改进建议</span>
          </div>
          <div class="suggestion-list">
            <el-timeline>
              <el-timeline-item
                v-for="(suggestion, index) in suggestions"
                :key="index"
                :type="suggestion.type"
              >
                <div class="suggestion-item">
                  <h4>{{ suggestion.title }}</h4>
                  <p>{{ suggestion.content }}</p>
                  <div class="suggestion-benefit">
                    <el-icon><TrendCharts /></el-icon>
                    <span>预期收益：{{ suggestion.benefit }}</span>
                  </div>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 对比分析 -->
    <el-card shadow="never" style="margin-top: 20px;">
      <div class="section-title">
        <el-icon><DataAnalysis /></el-icon>
        <span>同期对比分析</span>
      </div>
      
      <el-table :data="comparisonData" stripe border>
        <el-table-column prop="period" label="统计周期" width="150" />
        <el-table-column prop="taskCount" label="盘点任务" width="100" align="right" />
        <el-table-column prop="completionRate" label="完成率" width="120" align="right">
          <template #default="{ row }">
            {{ row.completionRate }}%
            <el-tag :type="row.completionRateTrend > 0 ? 'success' : 'danger'" size="small" style="margin-left: 4px;">
              {{ row.completionRateTrend > 0 ? '↑' : '↓' }}{{ Math.abs(row.completionRateTrend) }}%
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="accuracyRate" label="准确率" width="120" align="right">
          <template #default="{ row }">
            {{ row.accuracyRate }}%
          </template>
        </el-table-column>
        <el-table-column label="盈亏金额" width="180" align="right">
          <template #default="{ row }">
            <span :class="getDiffClass(row.profitLoss)">
              {{ row.profitLoss > 0 ? '+' : '' }}¥{{ Math.abs(row.profitLoss).toLocaleString() }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="avgDuration" label="平均耗时" width="120" align="right" />
        <el-table-column prop="problemCount" label="问题数" width="100" align="right">
          <template #default="{ row }">
            <el-tag :type="row.problemCount > 5 ? 'danger' : 'success'" size="small">
              {{ row.problemCount }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="环比" width="120" align="center">
          <template #default="{ row }">
            <span :class="row.trend > 0 ? 'trend-up' : 'trend-down'">
              {{ row.trend > 0 ? '改善' : '下降' }} {{ Math.abs(row.trend) }}%
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 总结与建议 -->
    <el-card shadow="never" class="conclusion-card" style="margin-top: 20px;">
      <div class="section-title">
        <el-icon><Tickets /></el-icon>
        <span>总结与展望</span>
      </div>
      
      <div class="conclusion-content">
        <el-alert
          title="总体评价"
          type="success"
          :closable="false"
          style="margin-bottom: 16px;"
        >
          本期盘点工作整体表现良好，完成率89.3%，准确率95.6%，盈亏控制在合理范围内。
        </el-alert>

        <div class="conclusion-sections">
          <div class="conclusion-section">
            <h4><el-icon><CircleCheck /></el-icon> 亮点</h4>
            <ul>
              <li>盘点效率较上期提升12%，工作流程更加顺畅</li>
              <li>ABC分类盘点策略效果显著，重点商品盘点频次合理</li>
              <li>差异原因记录完整率达到98%，便于问题追溯</li>
            </ul>
          </div>

          <div class="conclusion-section">
            <h4><el-icon><Warning /></el-icon> 需要改进</h4>
            <ul>
              <li>部分任务存在逾期现象，需加强时间管理</li>
              <li>高价值商品损耗率偏高，需加强防护措施</li>
              <li>盘点人员准确率差异较大，需加强培训</li>
            </ul>
          </div>

          <div class="conclusion-section">
            <h4><el-icon><Promotion /></el-icon> 下期计划</h4>
            <ul>
              <li>引入RFID技术，提升盘点效率50%以上</li>
              <li>优化库存货位管理，降低账实不符概率</li>
              <li>建立盘点激励机制，提升人员积极性</li>
            </ul>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import {
  DataLine, Document, Warning, Opportunity, DataAnalysis, TrendCharts,
  Tickets, CircleCheck, Promotion
} from '@element-plus/icons-vue'

// 状态
const selectedPeriod = ref('month')
const overallScore = ref(88)

// 问题列表
const problems = ref([
  {
    level: 'danger',
    levelName: '严重',
    title: '高价值商品损耗率过高',
    desc: 'iPhone系列商品月均损耗率4.5%，远高于行业标准2%',
    impact: '月损失约¥50,000',
    solution: '加强展示区管理，增加防盗设施，规范员工操作流程'
  },
  {
    level: 'warning',
    levelName: '警告',
    title: '部分任务逾期未完成',
    desc: '本月有3个盘点任务超过计划时间，影响库存数据准确性',
    impact: '库存数据滞后，影响采购决策',
    solution: '合理安排盘点时间，避开业务高峰期，增加人手配置'
  },
  {
    level: 'info',
    levelName: '提示',
    title: '盘点人员技能参差不齐',
    desc: '部分新员工盘点准确率仅78%，低于标准90%',
    impact: '增加复核工作量，降低整体效率',
    solution: '加强岗前培训，建立师徒制，定期考核'
  }
])

// 改进建议
const suggestions = ref([
  {
    type: 'success',
    title: '引入智能盘点设备',
    content: '采用RFID或条码扫描器，自动识别商品，减少人工录入错误',
    benefit: '效率提升50%，准确率提升至99%'
  },
  {
    type: 'primary',
    title: '优化盘点流程',
    content: '实施动态盘点策略，高周转商品增加盘点频次，低周转商品减少频次',
    benefit: '降低人力成本30%，保持准确性'
  },
  {
    type: 'warning',
    title: '加强库存管理',
    content: '规范进出库流程，实施先进先出，定期检查商品质量',
    benefit: '减少损耗，年节约¥200,000'
  },
  {
    type: 'info',
    title: '建立激励机制',
    content: '设立盘点质量奖，准确率高、效率快的给予奖励',
    benefit: '提升员工积极性，整体质量提升'
  }
])

// 对比数据
const comparisonData = ref([
  {
    period: '2024年1月',
    taskCount: 28,
    completionRate: 89.3,
    completionRateTrend: 5.2,
    accuracyRate: 95.6,
    profitLoss: 26500,
    avgDuration: '3.2小时',
    problemCount: 8,
    trend: 12
  },
  {
    period: '2023年12月',
    taskCount: 25,
    completionRate: 84.1,
    completionRateTrend: -2.1,
    accuracyRate: 97.4,
    profitLoss: -15600,
    avgDuration: '3.8小时',
    problemCount: 12,
    trend: -5
  },
  {
    period: '2023年11月',
    taskCount: 22,
    completionRate: 86.2,
    completionRateTrend: 3.5,
    accuracyRate: 96.2,
    profitLoss: 8900,
    avgDuration: '3.5小时',
    problemCount: 10,
    trend: 8
  }
])

// 方法
const handleGenerate = () => {
  ElMessage.success('正在生成分析报告...')
}

const getScoreLevel = (score) => {
  if (score >= 90) return '优秀'
  if (score >= 80) return '良好'
  if (score >= 70) return '合格'
  return '需改进'
}

const getScoreComment = (score) => {
  if (score >= 90) return '继续保持高标准执行'
  if (score >= 80) return '整体表现不错，仍有提升空间'
  if (score >= 70) return '达到基本要求，需要加强管理'
  return '存在较多问题，需要重点改进'
}

const getDiffClass = (value) => {
  if (value > 0) return 'profit-text'
  if (value < 0) return 'loss-text'
  return ''
}
</script>

<style scoped>
.check-analysis-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.score-card {
  margin-bottom: 20px;
}

.score-container {
  display: flex;
  gap: 40px;
}

.score-main {
  display: flex;
  gap: 30px;
  align-items: center;
}

.score-content {
  text-align: center;
}

.score-value {
  font-size: 48px;
  font-weight: bold;
  color: #409EFF;
}

.score-label {
  font-size: 14px;
  color: #909399;
  margin-top: 8px;
}

.score-desc h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
  color: #303133;
}

.score-desc p {
  margin: 0;
  font-size: 15px;
  color: #606266;
  line-height: 1.6;
}

.score-breakdown {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.breakdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.breakdown-label {
  width: 80px;
  font-size: 14px;
  color: #606266;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e4e7ed;
}

.problem-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.problem-item {
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
  border-left: 4px solid #F56C6C;
}

.problem-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.problem-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.problem-desc {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
  line-height: 1.6;
}

.problem-impact {
  font-size: 13px;
  color: #F56C6C;
  margin-bottom: 8px;
  font-weight: 500;
}

.problem-solution {
  font-size: 14px;
  color: #409EFF;
  line-height: 1.6;
}

.solution-label {
  font-weight: 600;
}

.suggestion-list {
  max-height: 400px;
  overflow-y: auto;
}

.suggestion-item h4 {
  margin: 0 0 8px 0;
  font-size: 15px;
  color: #303133;
}

.suggestion-item p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}

.suggestion-benefit {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #67C23A;
  font-weight: 500;
}

.profit-text {
  color: #67C23A;
  font-weight: 500;
}

.loss-text {
  color: #F56C6C;
  font-weight: 500;
}

.trend-up {
  color: #67C23A;
  font-weight: 500;
}

.trend-down {
  color: #F56C6C;
  font-weight: 500;
}

.conclusion-card {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
}

.conclusion-content {
  padding: 8px;
}

.conclusion-sections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.conclusion-section {
  padding: 16px;
  background: white;
  border-radius: 8px;
}

.conclusion-section h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 6px;
}

.conclusion-section ul {
  margin: 0;
  padding-left: 20px;
}

.conclusion-section li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}
</style>

